<template>
	<view class="container">
		<xk-header :headerbg="true" class="header" :back="true" title="会议室详情"></xk-header>
		<!-- 会议室信息 start -->
		<view class="detail-top">
			<view class="imgbox">
				<!-- <view><image class="imgurl" mode="widthFix" src="@/static/v2_rm94dp.png" ></image></view> -->
				<view><image class="imgurl" mode="widthFix" src="" ></image></view>
			</view>
			<view class="meeting-room-content">
				<view class="room-name">共享会议KTV</view>
				<view class="room-detail">
					位置：B栋1001室<br>
					人数：5-10人<br>
					设施：投影仪 笔记本 排插
				</view>
			</view>
			<view class="price">10元/30分钟</view>
		</view>
		<!-- 会议室信息 end -->

		<!-- 日期选择 start -->
		<view class="detail-middle">
			<block v-for="(item, index) in dayList" :key="index">
				<view class="block" :class="item.chose ? 'chose' : ''" @click="chose(item)">
					{{ item.week }}<br>
					{{ item.date }}
				</view>
			</block>
		</view>
		<!-- 日期选择 end -->

		<!-- 上午列表 start -->
		<view class="appointment">
			<view class="amAndpm">上<br>午</view>
			<view class="appointment-list">
				<block v-for="(item, index) in morningList" :key="index">
					<view class="list-content">
						<view class="time">{{ item.time }}</view>
						<view class="title">{{ item.title }}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 上午列表 end -->

		<!-- 下午列表 start -->
		<view class="appointment">
			<view class="amAndpm">下<br>午</view>
			<view class="appointment-list">
				<block v-for="(item, index) in afternoonList" :key="index">
					<view class="list-content">
						<view class="time">{{ item.time }}</view>
						<view class="title">{{ item.title }}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 下午列表 end -->

		<view style="height: 130rpx;"></view>

		<!-- 预约按钮 start -->
		<view class="bottom-button">
			<u-button @click="jumpToHandOn" type="primary" text="预定会议室" customStyle="width: 280rpx;margin-top: 24rpx;border-radius: 23px;"></u-button>
		</view>
		<!-- 预约按钮 end -->
	</view>
</template>

<script>
	const App = getApp()
	export default{
		data() {
			return {
				dayList:[
					{date: '09-10',week: '今天',chose:true},
					{date: '09-11',week: '周五',chose:false},
					{date: '09-12',week: '周六',chose:false},
					{date: '09-13',week: '周日',chose:false},
					{date: '09-14',week: '周一',chose:false},
					{date: '09-15',week: '周二',chose:false},
					{date: '09-16',week: '周三',chose:false}
				],
				morningList:[
					{time: '09:00-10:00',title: '李四预定的会议'}
				],
				afternoonList:[
					{time: '14:00-15:00',title: '张三预定的会议'},
					{time: '18:30-19:30',title: '王五预定的会议'}
				]
			};
		},
		methods: {
			chose(val){

			},

			//跳转到提交预约界面
			jumpToHandOn(){
				uni.navigateTo({
					url: '/pagesB/meeting/handOn'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chose{
		color: rgba(78, 110, 242, 1);
	}
	.bottom-button {
		position: fixed;
		height: 120rpx;
		background-color: #FFFFFF;
		width: 100%;
		bottom: 0;
	}
	.appointment{
		position: relative;
		height: 500rpx;
		background-color: #FFFFFF;
		margin-top: 10rpx;
		display: flex;

		.amAndpm {
			position: relative;
			height: 400rpx;
			width: 90rpx;
			background-color: rgba(245, 240, 240, 1);
			text-align: center;
			line-height: 102px;
			left: 20rpx;
			top: 50rpx;
		}

		.appointment-list {
			position: relative;
			top: 50rpx;
			height: 400rpx;
			width: 80%;
			left: 42rpx;
			overflow-y: auto;

			.list-content {
				width: 100%;
				height: 120rpx;
				border-radius: 5px;
				background-color: rgba(247, 247, 247, 1);
				margin-bottom: 20rpx;

				.time {
					position: relative;
					text-align: center;
					font-size: 28rpx;
					top: 20rpx;
				}

				.title{
					position: relative;
					text-align: center;
					font-size: 28rpx;
					top: 26rpx;
				}
			}
		}
	}
	.container {
	  background-color: rgba(246, 247, 251, 1);
	  height: 100vh;
	  .detail-top {
		position: relative;
	  	width: 100%;
	  	height: 300rpx;
	  	background-color: #FFFFFF;
		margin-top: 20rpx;

		.imgbox{
			  position: absolute;
			  margin:20rpx;
			  .imgurl{
				  position: absolute;
			  	  width:180rpx;
			  	  border-radius:10rpx;
			  	  height:90rpx;
			  }
		}
		.meeting-room-content {
			position: absolute;
			height: 90%;
			width: 400rpx;
			top: 20rpx;
			left: 30%;
			.room-name {
				font-size: 28rpx;
				font-weight: 600;
			}
			.room-detail {
				position: absolute;
				font-size: 24rpx;
				bottom: 10rpx;
			}
	  }
	  .price{
		  position: absolute;
		  text-align: center;
		  line-height: 40rpx;
		  height: 40rpx;
		  width: 150rpx;
		  font-size: 24rpx;
		  border: 2px solid #008EE5;
		  background-color: rgba(0, 142, 229, 0.3);
		  right: 20rpx;
		  top: 20rpx;
		  border-radius: 4px;
	   }
	}
	.detail-middle {
	  position: relative;
	  margin-top: 20rpx;
	  height: 110rpx;
	  background-color: #FFFFFF;
	  overflow-y: scroll;
	  display: -webkit-box;
	  .block{
		font-size: 24rpx;
		height: 75%;
		width: 100rpx;
		text-align: center;
		padding: 10rpx;
		line-height: 46rpx;
	  }
	}
}
</style>
